<template>
  <div class="scan-qrcode-page">
    <h1>扫码签到</h1>
    <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
    <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
	<div v-if="scanResult" class="result">
	  扫码结果: {{ scanResult }}
	</div>
    <button @click="simulateScan">模拟扫码</button>
   
  </div>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader';

export default {
  name: 'ScanQRCodeComponent',
  components: {
    QrcodeStream
  },
  data() {
    return {
      errorMessage: null,
      scanResult: null
    };
  },
  methods: {
    onDecode(content) {
      console.log("扫描内容：", content);
      this.scanResult = content;
      // 在这里处理扫码结果，例如重定向到签到页面
	   this.$modal.msgError(content)
      //this.$router.push(content);
	   this.$tab.navigateTo(this.scanResult)
    },
    onInit(promise) {
      promise.catch(error => {
        if (error.name === 'NotAllowedError') {
          this.errorMessage = '没有摄像头访问权限';
        } else if (error.name === 'NotFoundError') {
          this.errorMessage = '没有找到摄像头设备';
        } else if (error.name === 'NotSupportedError') {
          this.errorMessage = '不支持摄像头';
        } else if (error.name === 'NotReadableError') {
          this.errorMessage = '无法读取摄像头';
        } else if (error.name === 'OverconstrainedError') {
          this.errorMessage = '摄像头不支持当前约束条件';
        } else {
          this.errorMessage = '摄像头初始化出错';
        }
      });
    },
    simulateScan() {
      const simulatedContent = prompt('请输入模拟二维码内容');
      if (simulatedContent) {
        this.onDecode(simulatedContent);
      }
    }
  }
};
</script>

<style scoped>
.scan-qrcode-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.error {
  color: red;
  margin-top: 20px;
}

.result {
  margin-top: 20px;
  font-size: 18px;
  color: green;
}
</style>
